<template>
  <div class="list-echart">
    <div class="title">
      <span class="title-content">{{ tableTitle.title }}</span>
      <i class="iconfont icon-gengduo" @click="toListPage"/>
    </div>
    <div class="list-con">
      <h2><span>{{ tableTitle.name }}</span><span> {{ tableTitle.value }} </span></h2>
      <ul>
        <li v-for="(item, index) in dataSourceSplice" :key="(item, index)" @click="toDetail(item)">
          <span>{{ item.name }}</span>
          <div v-if="item.name" class="list-right"><span v-if="item.time" class="time" style="height:.40rem">{{ item.time }}</span><span>{{ item.value }}</span></div>
          <div v-else class="list-right"><span v-if="item.time" class="time">{{ item.time }}</span><span>{{ item.value }}</span></div>
          <i v-show="isShowIcon" class="iconfont icon-gengduo turn-right"/>
        </li>
      </ul>
    </div>
    <none-data v-if="isShowNoneData"/>
  </div>
</template>
<script>
import noneData from '@/components/noneData/noneData'
export default {
  components: {
    noneData
  },
  props: {
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    isShowIcon: {
      type: Boolean,
      default: false
    },
    tableTitle: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      isShowNoneData: false
    }
  },
  computed: {
    dataSourceSplice () {
      let listData = []
      let data = this.dataSource
      listData = data.splice(0, 8)
      return listData
    }
  },
  methods: {
    toDetail (item) {
      if (this.isShowIcon) {
        this.$emit('toDetailPage', item)
      }
    },
    toListPage () {
      this.$emit('toListPage')
    }
  }

}
</script>
<style lang="scss" scoped>
@import '../../assets/style/mixin';
.list-echart {
  margin-top: .20rem;
  position: relative;
  margin-bottom: .20rem;
  .list-con {
    border: 1px solid rgba(121, 196, 238, 0.35);
    background: rgba(47, 60, 134, 0.35);
    h2 {
      display: flex;
      display: -webkit-flex;
      padding:0 4%;
      border-bottom: .02rem solid rgba(230,229,232,.3);
      padding-bottom: .20rem;
      margin-top: .20rem;
      color:#65c4ea;
      span {
        flex:1;
        -webkit-flex:1;
        &:nth-child(1) {
          text-align: left;
        }
        &:nth-child(2) {
          text-align: right;
        }
      }
    }
    ul {
      li {
        display: flex;
        display: -webkit-flex;
         padding:0 4%;
         color:#65c4ea;
         font-size: .24rem;
         line-height: .70rem;
             border-bottom: 0.02rem solid rgba(230, 229, 232, 0.3);
         .list-right{
           span {
             display: block;
             &.time {
               color:rgba(101, 196, 234, .48);

             }
           }

         }
         i.turn-right {
            @include center;
           }
         span {
           flex:1;
           -webkit-flex:1;
             display:-webkit-flex;
            -webkit-align-items:center;
           &:nth-child(2) {
             text-align: right;
           }
         }
         &:last-of-type {
           border-bottom: 0px;
         }
      }
      padding-bottom: .30rem;
    }
  }
  .title{
    font-size: .32rem;
    line-height: 160%;
    margin-bottom: .10rem;
    color:#65c4ea;
    padding-right: .05rem;
    position: relative;
    .title-content {
      font-size: .32rem;
      width: 90%;
      display: inline-block;
      margin-right: .10rem;
      padding-left: .1rem;
    }
    .icon-gengduo {
      font-size: .32rem;
      display: inline-block;
      position: absolute;
      right: .1rem;
      top: 3%;
      font-size: .320rem;
      width:10%;
    }
  }
}
</style>
